<template>
  <div class="consumer-page activity-list-page">
    <el-breadcrumb class="breadcrumb page-title" separator="/">
      <el-breadcrumb-item :to="{ path: 'excelNameIndex' }">Electronics excel name</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="container-padding">
      <!--serchBox-->
      <div class="search-box">
        <el-form :inline="true" label-position="top" :model="searchForm" size="mini" ref="ruleForm"
                 class="demo-ruleForm main-search-box">
          <el-row>
            <!--category-->
            <el-form-item label="Category" style="width: 200px;margin-right: 10px">
              <el-select style="width: 200px;" class="editStyle" v-model="searchForm.categoryId" placeholder=""
                         @change="getBrandData">
                <el-option v-for="i in categoryOption" :key="i.value" :label="i.label" :value="i.value"></el-option>
              </el-select>
            </el-form-item>
            <!--brand-->
            <el-form-item label="Brand" style="width: 200px;margin-right: 10px">
              <el-select style="width: 200px" v-model="searchForm.brandId" placeholder="">
                <el-option v-for="i in brandData" :key="i.id" :label="i.text" :value="i.id"></el-option>
              </el-select>
            </el-form-item>
            <!--model-->
            <el-form-item label="Model" style="width: 200px;">
              <el-input v-model="searchForm.model" placeholder=""></el-input>
            </el-form-item>
            <!--搜索-->
            <el-form-item style="margin-top: 37px;margin-left: 30px;">
              <el-button @click="$router.push('/excelNameEdit')" type="success" style="width:72px;">New</el-button>
            </el-form-item>
            <el-form-item style="margin-top: 37px;margin-left: 10px;">
              <el-button @click="getList" type="primary">Search</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </div>
      <div class="list-items-box">
        <!--表格-->
        <el-table
          :data="tableData"
          v-loading="tableLoading"
          border style="width: 100%"
          ref="singleTable"
          highlight-current-row
          @current-change="handleCurrentChange"
          :row-class-name="tableRowClassName"
        >
          <!--edit-->
          <el-table-column prop="Edit" label="Edit" align="center" min-width="100">
            <template slot-scope="scope">
              <el-button type="" size="small" @click="toPage(scope.row.id, '/excelNameEdit')">Edit</el-button>
            </template>
          </el-table-column>
          <!--id-->
          <el-table-column prop="id" label="Id" align="center" min-width="100">
          </el-table-column>
          <!--category-->
          <el-table-column prop="category" label="Category" align="center" min-width="150">
          </el-table-column>
          <!--brand-->
          <el-table-column prop="brand" label="Brand" align="center" min-width="120">
          </el-table-column>
          <!--model-->
          <el-table-column prop="model" label="Model" align="center" min-width="200">
          </el-table-column>
          <!--excel name-->
          <el-table-column prop="excelName" label="Excel Name" align="center" min-width="120">
          </el-table-column>
          <!--create Date-->
          <el-table-column prop="createDate" label="Created Date" align="center" min-width="160">
            <template slot-scope="scope">
              <p>{{dateFormat(scope.row.createDate)}}</p>
            </template>
          </el-table-column>
          <!--Created By-->
          <el-table-column prop="createBy" label="Created By" align="center" min-width="200">
          </el-table-column>
          <!--update time-->
          <el-table-column prop="updateDate" label="Updated Date" align="center" min-width="160">
            <template slot-scope="scope">
              <p>{{dateFormat(scope.row.updateDate)}}</p>
            </template>
          </el-table-column>
          <!--update By-->
          <el-table-column prop="updateBy" label="Updated By" align="center" min-width="200">
          </el-table-column>
        </el-table>
        <!--分页-->
        <div class="block" style="margin-top: 15px;text-align: center;">
          <el-pagination @size-change="handleChangeSize" @current-change="handleChangePage"
                         :current-page="pageData.pageNum" :page-size="pageData.pageSize"
                         :page-sizes="[10, 20, 50, 100, 500]" :page-count="pageInfo.totalPages"
                         :total="pageInfo.totalCount" layout="total, prev, pager, next, jumper, sizes">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {searchElectronicsExcel} from '../../api/guc_api.js';
  import phoneBrand from '../../json/phoneBrand.json'

  export default {
    name: 'shopAdIndex',
    data() {
      return {
        //上传表单数据
        searchForm: {
          categoryId: '',
          brandId: '',
          model:'',
        },
        phoneBrand,
        brandData: [],
        //状态选项数据
        categoryOption: [
          {
            label: '',
            value: '',
          },
          {
            label: 'Phone',
            value: 1,
          },
          {
            label: 'Tablet',
            value: 2,
          }

        ],
        pageData: {
          //页数
          pageNum: 1,
          //没页数据条数
          pageSize: 10,
        },
        pageInfo: {
          //总数据条数
          totalCount: 0,
          //总页数
          totalPages: 0,
        },
        //表格加载动画
        tableLoading: false,
        //表格数据
        tableData: [],
        // 当前行
        currentRow: null,
      };
    },
    methods: {
      //获取brand数据
      getBrandData() {
        //先重置
        this.brandData = []
        this.searchForm.brandId = ''
        if (this.searchForm.categoryId == 1) {
          this.brandData = this.phoneBrand.properties.values
        }
        else {
          this.brandData = []
        }
      },
      //转码方法
      unicodeTozawgyi(value) {
        if (value) {
          return this.$translateLang(value || '', 'unicodeTozawgyi') || ''
        } else {
          return value;
        }
      },
      // 用来控制表格行点击选中状态
      handleCurrentChange(val) {
        this.currentRow = val;
      },
      //用来控制单双行样式
      tableRowClassName({row, rowIndex}) {
        if (rowIndex % 2 === 1) {
          return 'odd-row';
        }
        else if (rowIndex % 2 === 0) {
          return 'even-row';
        }
        return '';
      },
      // message alert 用于前端错误提示信息
      messageToastErr(msg) {
        this.$message({
          showClose: true,
          message: msg,
          duration: 5000,
          type: 'error'
        })
      },
      //edit页面的跳转
      toPage(id, route) {
        this.$router.push({
          path: route,
          query: {
            modelId: id
          }
        })
      },
      //价格单位格式化
      unitFormat(unit) {
        if (unit === 1) {
          return 'KYAT'
        }
        else {
          return 'LAKH'
        }
      },
      //每页显示条数改变后调用
      handleChangeSize(val) {
        this.pageData.pageSize = parseInt(val);
        this.pageData.pageNum = 1;
        this.getList();
      },
      //页数改变后调用
      handleChangePage(val) {
        this.pageData.pageNum = val;
        this.getList();
      },
      //日期格式化
      dateFormat(value) {
        let date = new Date(value);
        let Y = date.getFullYear();
        let m = date.getMonth() + 1;
        let d = date.getDate();
        let H = date.getHours();
        let i = date.getMinutes();
        let s = date.getSeconds();
        if (m < 10) {
          m = '0' + m;
        }
        if (d < 10) {
          d = '0' + d;
        }
        if (H < 10) {
          H = '0' + H;
        }
        if (i < 10) {
          i = '0' + i;
        }
        if (s < 10) {
          s = '0' + s;
        }
        let t = Y + '-' + m + '-' + d + '  ' + H + ':' + i + ':' + s;
        return t;
      },
      //获取表格数据
      getList() {
        window.scrollTo(0, 0)
        this.tableLoading = true;
        let formAjaxData = {
          propertyValueId: this.searchForm.brandId,
          model:this.searchForm.model
        }
        searchElectronicsExcel(Object.assign(formAjaxData, this.pageData))
          .then((res) => {
            this.tableLoading = false;
            if (res.data.errorID == 0) {
              this.tableData = res.data.object.list;
              // 分页信息配置
              this.pageInfo.totalPages = res.data.object.pages;
              this.pageInfo.totalCount = res.data.object.total;

            }
            else {
              this.messageToastErr(res.data.message)
            }
          })
          .catch((error) => {
            console.log(error)
            this.tableLoading = false
            this.messageToastErr('error,please try again later')
          })
      }
    },
    mounted() {
      this.getList();
    },
  };
</script>

<style>
  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 20px !important;
  }

  .breadcrumb {
    margin-bottom: 20px;
  }

  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 20px;
  }

  .search-box {
    position: relative;
    border-bottom: 1px solid #eee;
  }

  .list-items-box .el-form--inline.el-form--label-top .el-form-item__content {
    display: inline-block;
  }

  .container-padding {
    padding: 0 40px;
  }

  .new-user-dialog .el-form-item {
    margin-bottom: 0 !important;
  }

  .activity-list-page .el-checkbox + .el-checkbox {
    margin-left: 0 !important;
    margin-right: 30px !important;
  }
</style>
